var JuranAlert = function (title, message) {
    var t = `
    <div class="model-container">
        <div class="model-mask"></div>
        <div class="model-alert vertical-center">
            <div class="model-title">
                ${title}
            </div>
            <div class="model-message">
                ${message}
            </div>
            <div class="model-control">
                <button class="model-button" type="button" name="button">ok</button>
            </div>
        </div>
    </div>
    `
    $('body').append(t)
    //css
    var css = `
    <style class="model-remove">
    .model-container {
        position:fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
    .model-mask {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0.5;
    }
    .model-alert{
        margin: 0 auto;
        width: 200px;
        opacity: 1;
    }
    
    .model-title{
        text-align: center;
        font-size: 27px;
        background: lightblue;
    }
    .model-message {
        padding: 10px 5px;
        background: white;
    }
    .model-button {
        width: 100%;
        height: 100%;
        font-size: 22px;
        border: 0;
    }
    .vertical-center{
        top: 50%;
        position: relative;
        transform: translateY(-50%);
    }
    </style>
    `
    $('head').append(css)
    $('.model-button').on('click', function () {
        console.log('click ok')
        $('.model-remove').remove()
    })
}

var JuranAlert2 = function (title, message, callback) {
    var t = `
    <div class="model-container model-remove">
        <div class = 'model-mask'></div>
        <div class="model-alert vertical-center">
             <div class="model-title">${title}</div>
             <div class="model-message">${message}</div>
             <div class="model-control">
                <button class="model-button" type="button" data-type="cancel">Cancel</button>
                <button class="model-button" type="button" data-type="ok">Ok</button>
             </div>
        </div>
    </div>
    `
    $('body').append(t)
    //css
    var css = `
    <style class="model-remove">
        .model-container{
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
        .model-mask {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.5;
        }
        .model-alert{
            margin:0 auto;
            width: 200px;
            opacity: 1;
        }
        .model-title{
            text-align: center;
            font-size: 27px;
            background:  white;
        }
        .model-message {
            padding: 10px 5px;
            background: white;
        }
        .modal-control {
            font-size: 0;
        }
        .modal-button {
            width: 50%;
            height: 100%;
            font-size: 22px;
            border: 0;
        }
        .vertical-center {
            top: 50%;
            position: relative;
            transform: translateY(-50%);
        }
    </style>
    `
    $('head').append(css)
    // event
    $('.model-button').on('click', function (event) {
        console.log('click button')
        var type = $(event.target).data('type')
        if (type === 'cancel') {
            callback(false)
        } else {
            callback(true)
        }
        $('.model-remove').remove()
    })
}

var JuranPrompt = function (title, callback) {
    /*
    title 是string
    callback是一个如下的函数
    function(clickOk,input){
        //clickOk是一个bool表明点击的是OK还是Cancel
        //input 是string
    }
     */
    var t = `
    <div class="model-container model-remove">
        <div class="model-mask"></div>
        <div class="model-alert vertical-center">
            <div class="model-title">
                ${title}
            </div>
            <div class="model-message">
                <input class="model-input" type="text">
            </div>
            <div class="model-control">
                <button class="model-button" type="button" data-type="cancel">Cancel</button>
                <button class="model-button" type="button" data-type="ok">Ok</button>
            </div>
        </div>
    </div>
    `
    $('body').append(t)
    //css
    var css = `
    <style class="modal-remove">
        .modal-container {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
        .modal-mask {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.5;
        }
        .modal-alert {
            margin: 0 auto;
            width: 200px;
            opacity: 1;
        }
        .modal-title {
            text-align: center;
            font-size: 27px;
            background: lightblue;
        }
        .modal-message {
            padding: 10px 5px;
            background: white;
        }
        .modal-input {
            width: 100%;
        }
        .modal-control {
            font-size: 0;
        }
        .modal-button {
            width: 50%;
            height: 100%;
            font-size: 22px;
            border: 0;
        }
        /*通用css:垂直居中*/
        .vertical-center {
            top: 50%;
            position: relative;
            transform: translateY(-50%);
        }
    </style>
    `
    $('head').append(css)
    //event
    $('.model-button').on('click', function (event) {
        console.log('click button')
        var type = $(event.target).data('type')
        if (type === 'cancel') {
            callback(false)
        } else {
            var input = $('.model-input').val()
            callback(true, input)
        }
        $('.model-remove').remove()
    })
}

var buttonTemplate = function (title, index) {
    var t = `
    <button class="model-action-button" data-index="${index}">${title}</button>
    `
    return t
}

var JuranActions = function (title, actions, callback) {
    /*
    title 是 string
    actions 是一个包含 string 的数组
    callback 是一个如下的函数
    function(index) {
        // index 是下标, 具体如下
        // index 如果是 -1 表明用户点击了 cancel
    }

    这个函数生成一个弹窗页面
    弹窗包含 title 作为标题
    actions 里面的 string 作为标题生成按钮
    弹窗还包含一个 Cancel 按钮
    点击按钮的时候, 调用 callback(index)
    */

    var buttons = []
    for (var i = 0; i < actions.length; i++) {
        var a = actions[i]
        buttons.push(buttonTemplate(a, i))
    }
    var actionButtons = buttons.join('')
    var t = `
    <div class="model-container model-remove">
        <div class="model-mask"></div>
        <div class="model-alert vertical-center">
            <div class="model-title">${title}</div>
            <div class="model-message">${actionButtons}</div>
            <div class="model-control">
                <button class="model-button model-action-button" type="button" data-index="-1">Cancel</button>
            </div>
        </div>
    </div>
    `
    $('body').append(t)
    //css
    var css = `
    <style class="model-remove">
        .model-container {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }
        .model-mask {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.5;
        }
        .model-alert {
            margin: 0 auto;
            width: 200px;
            opacity: 1;
        }
        .model-title {
            text-align: center;
            font-size: 27px;
            background: lightblue;
        }
        .model-message {
            padding: 10px 5px;
            background: white;
        }
        .model-input {
            width: 100%;
        }
        .model-control {
            font-size: 0;
        }
        button {
            width: 100%;
        }
        .model-button {
            height: 100%;
            font-size: 22px;
            border: 0;
        }
        .vertical-center {
            top: 50%;
            position: relative;
            transform: translateY(-50%);
        }
    </style>
    `
    $('head').append(css)
    //event
    $('.model-action-button').on('click', function (event) {
        console.log('click button')
        var index = $(event.target).data('index')
        callback(index)
        $('.model-remove').remove()
    })
}